<template>
  <div>
    <div class="row">
      <div class="col-lg-4"><h3 class="text-primary">全国农业新闻</h3></div>
    </div>
    <div class="row" v-show="showNoData">
      <div class="col-lg-4"></div>
      <div class="col-lg-6">
        <br /><br /><br /><br />
        <h3 class="text-primary align-center">暂无新闻</h3>
      </div>
    </div>
    <div class="table-responsive" v-show="showNews">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">标题</th>
            <th scope="col">来源</th>
            <th scope="col">日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="index in range(start, end)" :key="index">
            <td>{{ index + 1 }}</td>
            <td>
              <router-link
                :to="{
                  path: '/governmentCountryNewsPage',
                  query: {
                    title: title[index],
                    source: source[index],
                    date: date[index],
                    url: url[index],
                  },
                }"
                class="btn"
                >{{ title[index] }}</router-link
              >
            </td>
            <td>{{ source[index] }}</td>
            <td>{{ date[index] }}</td>
          </tr>
        </tbody>
      </table>
      <div class="row">
        <div class="col-lg-5"></div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageReduce()">
              上一页
            </button>
          </h5>
        </div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageAdd()">
              下一页
            </button>
          </h5>
        </div>
        <div class="col-lg-5"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: [],
      source: [],
      date: [],
      url: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
      pageNum: 8,
      dataLength: 0,
      showNews: false,
      showNoData: true,
    };
  },
  methods: {
    getNews() {
      this.title = [];
      this.source = [];
      this.date = [];
      this.url = [];

      this.axios
        .get("http://localhost:8081/api-service/getChnAgriNews?key=123456")
        .then((body) => {
          var result = body.data;
          this.dataLength = result.data.result.length;
          if (this.dataLength == 0) {
            this.showNoData = true;
            this.showNews = false;
          } else {
            this.showNoData = false;
            this.showNews = true;
          }
          for (var i = 0; i < result.data.result.length; i++) {
            this.title.push(result.data.result[i].newsTitle);
            this.source.push(result.data.result[i].newsSource);
            this.date.push(result.data.result[i].date);
            this.url.push(result.data.result[i].newsUrl);
          }
          this.part = Math.floor(result.data.result.length / this.pageNum);
          if (this.part == 0) {
            this.end = this.data.length;
          } else {
            this.end = this.pageNum;
          }
        });
    },
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.dataLength - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.dataLength) {
        this.start += this.pageNum;
        this.end = this.dataLength;
      }
    },
    pageReduce() {
      if (this.end == this.dataLength) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
  mounted() {
    this.getNews();
  },
};
</script>